

<div style="margin:10px;">
	<h2>{RECENT_UPDATE}</h2>
	<select onchange="change_time();" id='recent_time'>
		<option value=''>{ALL_PHOTO}</option>
		<option value='10' <!-- IF recent_time="10" -->selected="selected"<!-- ENDIF -->>{TEN_M_AGO}</option>
		<option value='60' <!-- IF recent_time="60" -->selected="selected"<!-- ENDIF -->>{ONE_H_AGO}</option>
	</select>
</div>

<div style="margin:10px;">
	<h2>{TIME_RANGE}</h2>
{FROM_DATE}<input type="text" id="date_from" class="textinput" value="{from}" style="width:60px;font-size:10px;" /> 
{TO_DATE}<input type="text" id="date_to" class="textinput" style="width:60px;font-size:10px;" value='{to}' /><br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" onclick="go_time_range()" value="{SEARCH}" />
	
</div>

<div style="margin:10px;">
	<h2>{SEARCH_SEARCH}</h2>
	<form onsubmit="go_search();return false;">
	<table cellpadding="0" cellspacing="0" border="0">
		<tr>
			<td>{SEARCH_TITLE}</td>
			<td><input type="text" id="search_title" class="textinput" style="width:120px;" value="{search_title}" /></td>
		</tr>
		<tr>
			<td>{SEARCH_TAG}</td>
			<td><input type="text" id="search_tag" class="textinput"  style="width:120px;" value="{search_tag}" /></td>
		</tr>
		<tr>
			<td>{SEARCH_DESCRIPTION}</td>
			<td><input type="text" id="search_description" class="textinput" style="width:120px;"  value="{search_description}" /></td>
		</tr>
		<tr>
			<td colspan="2">
				&nbsp;&nbsp;<input type="submit" value="{SEARCH_SUBMIT}" />&nbsp;&nbsp;
			</td>
		</tr>
	</table>
	</form>
</div>

<div style="margin:10px;">
	<h2>{SEARCH_CATEGORY}</h2>
	<select onchange="change_category();" id='category_id'>
		<option value=''>{ALL_PHOTO}</option>
		<!-- BEGIN categories -->
        <option value="{category_id}" <!-- IF parent.category_id=category_id -->selected="selected"<!-- ENDIF -->>{name}</option>
        <!-- END -->
	</select>
</div>

<script>
$(function()
{
	$("[id^=date_]").datepicker();
});

function go_time_range()
{
	var from = $('#date_from').val();
	var to = $('#date_to').val();
	var url = window.location.href.toString();
	url = url.replace(/&from=[^&]+/,'').replace(/&time=[^&]+/,'').replace(/&to=[^&]+/,'');
	if (from && to && from <= to)
	{
		window.location.href = url+"&from="+from+"&to="+to;
	}
}

function go_search()
{
	var url = window.location.href.toString();
	url = url.replace(/&search_tag=[^&]+/,'').replace(/&search_title=[^&]+/,'').replace(/&search_description=[^&]+/,'');
	if($('#search_title').val()) url+='&search_title='+encodeURIComponent($('#search_title').val());
	if ($('#search_tag').val()) url+='&search_tag='+encodeURIComponent($('#search_tag').val());
	if ($('#search_description').val()) url+='&search_description='+encodeURIComponent($('#search_description').val());
	window.location.href = url;
}

function change_category()
{
	var url = window.location.href.toString();
	url = url.replace(/&category_id=[^&]+/,'');
	if($('#category_id').val()) url+='&category_id='+$('#category_id').val();
	window.location.href = url;
}

function change_time()
{
	var url = window.location.href.toString();
	url = url.replace(/&time=[^&]+/,'').replace(/&from=[^&]+/,'').replace(/&to=[^&]+/,'');
	if($('#recent_time').val()) url+='&time='+$('#recent_time').val();
	window.location.href = url;
}
</script>